<template xmlns:el-row="http://www.w3.org/1999/html">
  <div id="app">
    <el-container id="container">
      <el-main id="content" style="border-bottom: 1px solid #E8E8E8;">
        <el-row :gutter="20">
             <el-col :span="16">
               <el-container style="min-height: calc(100vh - 160px);border:1px solid #E8E8E8;box-sizing: border-box;border-radius: 5px">
                 <el-header>
                   <el-row :gutter="20" class="panel-group">
                     <el-col :span="6">
                       <div class="card-panel" style="margin-top: 10px;cursor: pointer;background: linear-gradient(45deg, #6BD197, #7AE7A7);height: 60px" >
                         <el-row :gutter="40">
                           <el-col :span="12">
                             <div style="height: 60px;line-height: 60px;margin-left: 20px;color: white;font-size: 20px">
                               <svg-icon style="width: 30px;height: 30px" icon-class="deal" class-name="card-panel-icon" />
                             </div>
                           </el-col>
                           <el-col :span="12">
                             <div style="font-size: 15px;height: 30px;line-height: 30px;color: white;font-weight: bolder">我的待办</div>

                             <div style="font-size: 13px;height: 15px;line-height: 15px;color: white">
                               <count-to :start-val="0" :end-val="toDoData.length" :duration="3200" class="card-panel-num" />
                             </div>
                           </el-col>
                         </el-row>
                       </div>
                     </el-col>
                     <el-col :span="6">
                       <div class="card-panel" style="margin-top: 10px;cursor: pointer;background: linear-gradient(45deg, #387CFE, #6E9BF2);height: 60px" >
                         <el-row :gutter="40">
                           <el-col :span="12">
                             <div style="height: 60px;line-height: 60px;margin-left: 20px;color: white;font-size: 20px">
                               <svg-icon icon-class="faqi" class-name="card-panel-icon" style="width: 30px;height: 30px" />
                             </div>
                           </el-col>
                           <el-col :span="12">
                             <div style="font-size: 15px;height: 30px;line-height: 30px;color: white;font-weight: bolder">我的待办</div>

                             <div style="font-size: 13px;height: 15px;line-height: 15px;color: white">
                               <count-to :start-val="0" :end-val="messageData.length" :duration="3200" class="card-panel-num" />
                             </div>
                           </el-col>
                         </el-row>
                       </div>
                     </el-col>
                     <el-col :span="6">
                       <div class="card-panel" style="margin-top: 10px;cursor: pointer;background: linear-gradient(45deg, #FFA51E, #E9BD7A);height: 60px" >
                         <el-row :gutter="40">
                           <el-col :span="12">
                             <div style="height: 60px;line-height: 60px;margin-left: 20px;color: white;font-size: 20px">
                               <svg-icon icon-class="办理" class-name="card-panel-icon" style="width: 30px;height: 30px" />
                             </div>
                           </el-col>
                           <el-col :span="12">
                             <div style="font-size: 15px;height: 30px;line-height: 30px;color: white;font-weight: bolder">待阅消息</div>

                             <div style="font-size: 13px;height: 15px;line-height: 15px;color: white">
                               <count-to :start-val="0" :end-val="messageData.length" :duration="3200" class="card-panel-num" />
                             </div>
                           </el-col>
                         </el-row>
                       </div>
                     </el-col>
                     <el-col :span="6">
                       <div class="card-panel" style="margin-top: 10px;cursor: pointer;background: linear-gradient(45deg, #FFA51E, #E9BD7A);height: 60px" >
                         <el-row :gutter="40">
                           <el-col :span="12">
                             <div style="height: 60px;line-height: 60px;margin-left: 20px;color: white;font-size: 20px">
                               <svg-icon icon-class="办理" class-name="card-panel-icon" style="width: 30px;height: 30px" />
                             </div>
                           </el-col>
                           <el-col :span="12">
                             <div style="font-size: 15px;height: 30px;line-height: 30px;color: white;font-weight: bolder">已阅消息</div>

                             <div style="font-size: 13px;height: 15px;line-height: 15px;color: white">
                               <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
                             </div>
                           </el-col>
                         </el-row>
                       </div>
                     </el-col>
                   </el-row>
                 </el-header>
                 <el-main>
                    <el-row :gutter="20">
                        <el-col :span="12">
                          <el-container style="border:1px solid #E8E8E8;box-sizing: border-box;border-radius: 5px">
                            <el-header style="border-bottom:1px solid #E8E8E8;height: 40px;line-height: 20px;color: black;line-height: 40px;font-weight: bolder">
                                系统总览
                            </el-header>
                            <el-main style="overflow: auto;">
                                                           <el-row :gutter="40" class="panel-group" v-for="(item,index) in sysData" v-if="index%2==0">
                                                             <el-col  :span="12"   >
                                                               <div class="card-panel" style="margin-top: 10px;cursor: pointer; border: 1px solid #E8E8E8;height: 80px"  @click="tiaozhuan(item)" >
                                                                 <el-row :gutter="40">
                                                                   <el-col :span="8">
                                                                     <el-image  style="height: 50px;width: 50px;margin-top: 20px;margin-left: 20px;" :src="item.sysIcon" ></el-image>
                                                                   </el-col>
                                                                   <el-col :span="16">
                                                                     <div style="font-size: 15px;height: 30px;line-height: 30px;text-align: center;font-weight: bolder">{{item.name}}</div>
                                                                     <div style="font-size: 13px;height: 15px;line-height: 15px;text-align: center;">{{item.description}}</div>
                                                                   </el-col>
                                                                 </el-row>
                                                               </div>
                                                             </el-col>
                                                             <el-col  :span="12"  v-if="index<=sysData.length-2"  >
                                                               <div class="card-panel" style="margin-top: 10px;cursor: pointer;border: 1px solid #E8E8E8;height: 80px"  @click="tiaozhuan(sysData[index+1])" >
                                                                 <el-row :gutter="40">
                                                                   <el-col :span="8">
                                                                     <el-image  style="height: 50px;width: 50px;margin-top: 20px;margin-left: 20px;" :src="sysData[index+1].sysIcon" ></el-image>
                                                                   </el-col>
                                                                   <el-col :span="16">
                                                                     <div style="font-size: 15px;height: 30px;line-height: 30px;text-align: center;font-weight: bolder">{{sysData[index+1].name}}</div>
                                                                     <div style="font-size: 13px;height: 15px;line-height: 15px;text-align: center;">{{sysData[index+1].description}}</div>
                                                                   </el-col>
                                                                 </el-row>
                                                               </div>
                                                             </el-col>
                                                           </el-row>


                            </el-main>
                          </el-container>
                        </el-col>
                         <el-col :span="12">
                           <el-container style="border:1px solid #E8E8E8;box-sizing: border-box;border-radius: 5px">
                             <el-header style="border-bottom:1px solid #E8E8E8;height: 40px;line-height: 20px;color: black;font-weight: bolder;line-height: 40px">
                                 新闻公告
                             </el-header>
                             <el-main style="overflow: auto;max-height:calc(100vh - 290px)">
                               <el-card shadow="hover" v-for="(item,index) in noticeData" style="margin-top: 10px">
                                 <el-row :gutter="20" slot="header" class="clearfix" style="font-weight: bolder" >
                                  <el-col :span="18">{{item.title}}</el-col>  <el-col :span="6"><el-link @click="selectDetail(item)" type="primary">查看详情</el-link></el-col>
                                 </el-row>
                                 <el-row>
                                     <div  class="text item" >
                                       类型:
                                       <el-tag
                                         type="success"
                                         effect="dark">
                                         {{item.typeName}}
                                       </el-tag>
                                     </div>

                                 </el-row>
                                 <el-row style="margin-top: 10px">
                                     <div  class="text item" >
                                       内容:
                                       <el-tooltip  >
                                         <span class="text">{{item.content}}</span>
                                       </el-tooltip>
                                     </div>

                                 </el-row>
                                 <el-row style="margin-top: 10px">
                                     <div  class="text item" >
                                       发布时间:
                                       <el-tag
                                         type="primary"
                                         effect="dark">
                                         {{item.createTime}}
                                       </el-tag>
                                     </div>
                                 </el-row>
                               </el-card>
                             </el-main>
                           </el-container>
                         </el-col>
                    </el-row>
              </el-main>

               </el-container>

             </el-col>
          <el-col :span="8">
                <el-container style="min-height: calc(100vh - 160px);border:1px solid #E8E8E8;box-sizing: border-box;border-radius: 5px">
                  <el-header style="border-bottom:1px solid #E8E8E8;height: 40px;line-height: 20px;color: black">
                    <el-badge :value="toDoData.length" class="item" style="margin-top:10px;font-weight: bolder">
                      待办信息
                    </el-badge>
                  </el-header>
                  <el-main style="overflow: auto;height: 500px">
                    <el-card shadow="hover" v-for="(item,index) in toDoData" style="margin-top: 10px">
                      <div slot="header" class="clearfix" style="font-weight: bolder" >
                        <span>{{item.processName}}</span>
                      </div>
                      <el-row>
                        <el-col :span="12" >
                             <div  class="text item" >
                                流程编号:
                               <el-tag
                                 type="success"
                                 effect="dark">
                                 {{item.processNumber}}
                               </el-tag>
                             </div>
                        </el-col>
                        <el-col :span="12" >
                          <div  class="text item" >
                            流程名称:
                            <el-tag
                              type="primary"
                              effect="dark">
                              {{item.processName}}
                            </el-tag>
                          </div>
                        </el-col>

                      </el-row>
                      <el-row style="margin-top: 10px">
                        <el-col :span="12" >
                          <div  class="text item" >
                            流程来源:
                            <el-tag
                              type="success"
                              effect="dark">
                              {{item.processFrom}}
                            </el-tag>
                          </div>
                        </el-col>
                        <el-col :span="12" >
                          <div  class="text item" >
                            审批节点
                            <el-tag
                              type="primary"
                              effect="dark">
                              {{item.nodeName}}
                            </el-tag>
                          </div>
                        </el-col>

                      </el-row>
                      <el-row style="margin-top: 10px">
                        <el-col :span="20" >
                          <div  class="text item" >
                            发起时间:
                            <el-tag
                              type="primary"
                              effect="dark">
                              {{item.reciveAt}}
                            </el-tag>
                          </div>
                        </el-col>

                      </el-row>
                    </el-card>

                  </el-main>
                </el-container>
          </el-col>
        </el-row>




      </el-main>
    </el-container>
  </div>

</template>

<script>
  import echarts from 'echarts'
  import CountTo from 'vue-count-to'
  import {
    getMessage,updateMessage
  } from "@/api/system/common";
  require('echarts/theme/macarons')
  import {
    userApplicaition,ssoLogin
  } from "@/api/system/application";
  import {
    bpmList
  } from "@/api/system/process";
  import {
    listNotice
  } from "@/api/system/regime";

  export default {
    name: "index",
    components:{
      CountTo
    },
    data() {
      return {
        messageData:[],
        dialogShow:false,
        bpmInterval:null,
        chart: null,
        sysData:[],
        query:{
          userId:this.$store.state.user.userCode
        },
        queryParams: {
          current: 1,
          size:5
        },
        noticeData:[],
        toDoData:[],

      }
    },
    methods:{
      getUserApplication(){
        debugger;
        let x=this.$store.state.user;

        userApplicaition(this.query).then(response => {
               this.sysData=response.data;
        });
      },
      getNotice(){
               listNotice(this.queryParams).then(response=>{
                       this.noticeData=response.data;
               })
      },
        bpmList(){
          bpmList().then(response => {
               this.toDoData=response.data;
          });
        },
      getMessage(){
        let that=this;
        getMessage(JSON.stringify({status:0})).then(response => {
          this.messageData = response.data;
        })

      },
      tiaozhuan(data){
        ssoLogin(null,data.sysUrl).then(response => {
          window.open(response);
        });
      },
      selectDetail(data){
        debugger;
        let id=parseInt( data.picUrl)*6;
        this.fileUrl="http://10.20.3.66/BPM/DocumentViewer/ViewerandDownload.aspx?id="+id;
        window.open(this.fileUrl);
      },
      setTime(){
        if(this.bpmInterval==null){
          this.bpmInterval= setInterval(this.bpmList,5000);
        }
      }
    },
    beforeDestroy(){
         if(this.bpmInterval){
           clearInterval(this.bpmInterval);
           this.bpmInterval=null;
         }
    },
    mounted() {
      this.getUserApplication();
      this.bpmList();
      this.getNotice();
       this.setTime();
      this.getMessage();
    },

  }
</script>

<style scoped>
  #container{
    /*background-image: url("../../../assets/背景图.jpg");*/
    height: 100%;
    width: 98%;
    margin: 20px;
    min-height: calc(100vh - 124px);
    min-width: calc(100% - 800px);
    overflow: hidden;
    border: 1px solid #E8E8E8;
  }
  html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .el-main{
    height: 100%;
    overflow: hidden;
  }
  #footer{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    border: none;
  }

  ::v-deep .el-table__body tr,
  ::v-deep .el-table__body td {
    padding: 0;
  }

  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background: none;
    border:1px solid #04c2ed;
    color: white;
    height: 40px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
  }
  ::v-deep .el-table tbody tr:hover > td {
    background: #063570 !important;
  }

  ::v-deep .el-button--text{
       color: white;
  }



  ::v-deep .el-table__header-wrapper {
    border: solid 1px #04c2ed;

  }


  ::v-deep .el-table__row.warning-row {
    background: #063570;
  }

  ::v-deep.deepClass{
    background: #063570;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    /* background-color: #04c2ed;*/
    background: none;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    opacity: 0.5;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #04c2ed;
  }
  .el-table::before {
    height: 0px;
  }
  .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{
    border: none;
  }

</style>
